import React, { useState } from "react";
import { Button, View, Text, StyleSheet, useColorScheme } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { AppearanceHarmony } from 'react-native-appearance';

const AppearanceExample = () => {
  // 当前显示模式
  const scheme = useColorScheme();
  const currentScheme = scheme ?? scheme!.toString();

  // 监听显示模式
  const [listenedScheme, setListenedScheme] = useState('');
  AppearanceHarmony.addChangeListener(({ colorScheme }) => {
    setListenedScheme(colorScheme ?? colorScheme!.toString());
  });

  // 获取显示模式
  const [gotScheme, setGotScheme] = useState('');
  const getAppearance = ()=> {
    const result = AppearanceHarmony.getColorScheme();
    setGotScheme(result ?? result!.toString());
  }

  // 修改显示模式
  const changeAppearance = ()=> {
    const result = AppearanceHarmony.getColorScheme();
    if (result == 'dark') {
      AppearanceHarmony.setColorScheme('light');
    } else if (result == 'light') {
      AppearanceHarmony.setColorScheme('dark');
    }
  }

  const styles = StyleSheet.create({
    container: {
      padding: 50,
      width: '100%',
      height: '100%',
      backgroundColor: currentScheme == 'dark' ? 'lightgray': 'white'
    },
    row: {
      paddingTop: 30
    }
  });

  return (
    <Tester style={{ paddingBottom: 80 }}>
      <TestSuite name='Appearance'>
        <TestCase itShould='显示模式'>
          <View style={styles.container}>
            <Text style={styles.row}>当前显示模式：{currentScheme}</Text>
            <Text style={styles.row}>监听的显示模式：{listenedScheme}</Text>
            <Text style={styles.row}>获取的显示模式：{gotScheme}</Text>
            <View style={styles.row}><Button title="获取显示模式" onPress={()=>getAppearance()} /></View>
            <View style={styles.row}><Button title="修改显示模式" onPress={()=>changeAppearance()} /></View>
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
}

export const displayName = 'react-native-appearance';
export const framework = 'React';
export const category = 'basic';
export const title = 'react-native-appearance';
export const documentationURL = 'https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-screens.md';
export const description = 'react-native-appearance';

export const examples = [
  {
    title: 'react-native-appearance',
    render: function (): any {
      return <AppearanceExample />;
    },
  },
];
